<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="icon" href="favicon.ico" />
  <title>后台管理系统通用模板</title>
  <style>
    .dialog-confirm {
      position: relative;
      width: 420px;
      height: 180px;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -80%);
      z-index: 9999;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      background: rgba(255, 255, 255);
      visibility: hidden;
      opacity: 0;
      transition: all 0.8s ease-in-out;
      border-radius: 3px;
      padding: 20px 0;
    }

    .dialog-confirm>.title {
      font-size: 15px;
      /* font-weight: 600; */
      position: absolute;
      left: 15px;
      top: 10px;
    }

    .dialog-confirm.show {
      visibility: visible;
      opacity: 1;
    }

    .dialog-confirm>.content {
      padding: 0 30px 30px 30px;
      width: 100%;
      color: #000;
    }

    .btn-box {
      width: 100%;
      /* padding: 0 20px; */
      display: flex;
      justify-content: flex-end;
      position: absolute;
      right: 20px;
      bottom: 20px;
    }

    .btn {
      /* elementUI的按钮样式 */
      width: 75px;
      height: 30px;
      /* line-height: 30px; */
      text-align: center;
      border-radius: 4px;
      border: none;
      outline: none;
      cursor: pointer;
      background: #409eff;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      transition: all 0.3s ease-in-out;
      margin-left: 20px;
    }

    .btn-cancel {
      background: #fff;
      color: #606266;
      border: 1px solid #dcdfe6;
      font-size: 14px;
    }

    .btn-confirm {
      background: #3399ff;
    }

    .btn-cancel:hover {
      color: #409eff;
      border-color: #c6e2ff;
      background-color: #ecf5ff;
      outline: none;
    }

    .btn-confirm:hover {
      background: rgba(51, 153, 255, 0.672);
    }

    html,
    body,
    #app {
      height: 100%;
      margin: 0px;
      padding: 0px;
      width: 100%;
    }

    .app-home {
      background-color: #303133;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .app-home__main {
      user-select: none;
      width: 100%;
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #fff;
    }

    .app-home__loading {
      height: 32px;
      width: 32px;
      margin-bottom: 20px;
    }
  </style>
  <script src="/js/version-polling.min.js"></script>
  <script type="text/javascript">
    /* 检查ie浏览器版本 */
    ; (function () {
      var api = '/browser/browser.html'
      // 检测浏览器内核
      var Sys = {}
      var ua = navigator.userAgent.toLowerCase()
      var s
        ; (s = ua.match(/msie ([\d.]+)/))
          ? (Sys.ie = s[1])
          : (s = ua.match(/firefox\/([\d.]+)/))
            ? (Sys.firefox = s[1])
            : (s = ua.match(/chrome\/([\d.]+)/))
              ? (Sys.chrome = s[1])
              : (s = ua.match(/opera.([\d.]+)/))
                ? (Sys.opera = s[1])
                : (s = ua.match(/version\/([\d.]+).*safari/))
                  ? (Sys.safari = s[1])
                  : 0
      if (
        Sys.ie ||
        (Sys.firefox && parseFloat(Sys.firefox) < 78) ||
        (Sys.chrome && parseFloat(Sys.chrome) < 86) ||
        (Sys.safari && parseFloat(Sys.safari) < 14)
      ) {
        // IE浏览器 火狐浏览器 谷歌浏览器 safari浏览器
        location.href = location.protocol + '//' + location.host + api
      }
      // console.log('Sys.ie',Sys.ie);
      // console.log('Sys.firefox',Sys.firefox);
      // console.log('Sys.chrome',Sys.chrome);
      // console.log('Sys.safari',Sys.safari);
    })()
  </script>
</head>

<body>
  <div id="app">
    <div class="app-home">
      <div class="app-home__main">
        <img class="app-home__loading" src="./public/images/loading-spin.svg" alt="loading">
        <!-- 系统启动中... -->
      </div>
    </div>
  </div>
  <script type="module" src="./src/main.js"></script>
  <script type="module" src="/src/assets/icon/iconfont.js"></script>
  <div class="dialog-confirm">
    <div class="title">提示</div>
    <div class="content">检测到系统有更新，点击确定刷新页面！</div>
    <div class="btn-box">
      <button class="btn btn-cancel" id="cancel">取消</button>
      <button class="btn btn-confirm" id="submit">确定</button>
    </div>
  </div>
  <script>
    // 测试/生产环境间歇检测系统更新
    // VersionPolling.createVersionPolling({
    //   appETagKey: new Date().getTime() + '',
    //   pollingInterval: 10 * 1000,
    //   onUpdate: self => {
    //     document.querySelector('.dialog-confirm').classList.add('show')
    //   }
    // })
    // document.getElementById('cancel').addEventListener('click', () => {
    //   // 弹窗消失
    //   document.querySelector('.dialog-confirm').classList.remove('show')
    // })
    // document.getElementById('submit').addEventListener('click', () => {
    //   // 页面强制刷新
    //   document.querySelector('.dialog-confirm').classList.remove('show')
    //   window.location.reload()
    // })
  </script>
</body>

</html>